<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-simple
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>


<body style="height: 100%; margin: 0" id="body">
  <div id="container" style="height: 100%"></div>


  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    //     option = {
    //   xAxis: {
    //     type: 'category',
    //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //   },
    //   yAxis: {
    //     type: 'value'
    //   },
    //   series: [
    //     {
    //       data: [120, 200, 150, 80, 70, 110, 130],
    //       type: 'bar'
    //     }
    //   ]
    // };

    //     if (option && typeof option === 'object') {
    //       myChart.setOption(option);
    //     }

    //     window.addEventListener('resize', myChart.resize);
    const dataList =
      [
        { name: '固定工资', value: '590' },
        { name: '注册师津贴', value: '540' },
        { name: '生产资金', value: '920' },
        { name: '补充奖金', value: '965' },
        { name: '创新成果专项奖励', value: '1100' },
        { name: '固定工资', value: '590' },
        { name: '注册师津贴', value: '540' },
      ]
    let max = dataList.map(item => item).sort((a, b) => b.value - a.value)[0]
    let dataMaxList = new Array(dataList.length).fill(max)
    option = {

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',

        },

        formatter: function (params) {
          return params[0].name + '<br>金额(元)：' + params[0].data;
        },
      },
      xAxis: {
        type: 'category',
        data: dataList.map(item => item.name),
        axisLabel: {
          margin: 20,

          // x轴文本换行
          formatter: function (params) {
            var newParamsName = '' // 最终拼接成的字符串
            var paramsNameNumber = params.length // 实际标签的个数
            var provideNumber = 4 // 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              // 循环每一行,p表示行
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "" // 表示每一次截取的字符串
                var start = p * provideNumber // 开始截取的位置
                var end = start + provideNumber // 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) tempStr = params.substring(start, paramsNameNumber)
                else tempStr = params.substring(start, end) + "\n" // 每一次拼接字符串并换行
                newParamsName += tempStr // 最终拼成的字符串
              }
            } else {
              newParamsName = params // 将旧标签的值赋给新标签
            }
            return newParamsName
          }

        },

        axisLine: {//这是y轴文字颜色
          lineStyle: {
            color: "#fff",
          }
        }

      },
      yAxis: {
        type: 'value',
        name: "金额(元)",
        nameTextStyle: {
          color: ""
        },
        splitLine: {    //网格线
          lineStyle: {
            type: 'dashed',//设置网格线类型 dotted：虚线   solid:实线
          },
          show: true //隐藏或显示
        },
        axisLine: {//这是y轴文字颜色
          lineStyle: {
            color: "#fff",
          }
        }



      },
      series: [
        {
          // /数据图
          data: dataList.map(item => item.value),

          type: 'bar',
          barGap: '-100%',
          barWidth: 20,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#0B4EC3" // 0% 处的颜色
              }, {
                offset: 0.6,
                color: "#138CEB" // 60% 处的颜色
              }, {
                offset: 1,
                color: "#17AAFE" // 100% 处的颜色
              }], false)
            }
          },
          z: 2,
        },
        {
          // /数据图
          data: dataList.map(item => item.value),
          type: 'bar',
          barWidth: 40,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#09337C" // 0% 处的颜色
              }, {
                offset: 0.6,
                color: "#0761C0" // 60% 处的颜色
              }, {
                offset: 1,
                color: "#0575DE" // 100% 处的颜色
              }], false)
            }
          },
          z: 1,
        },
        {
          // 最上面菱形
          data: dataList.map(item => item.value),
          type: 'pictorialBar',
          symbol: 'diamond',
          symbolSize: ['40', '30'],
          symbolPosition: 'end',
          symbolOffset: ['', '-50%'],
          itemStyle: {
            color: 'rgba(61, 138, 228, 1)'
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              fontSize: 15,
              fontWeight: 'bold',

              textStyle: {
                
                textShadowColor:"rgba(53, 219, 255, 1)",//文字阴影颜色
                    textShadowBlur:10.5,//文字本身的阴影长度
                    // textShadowOffsetX:1,//文字本身的阴影 X 偏移
                    // textShadowOffsetY:1,//文字本身的阴影 Y 偏移
                color: 'rgba(53, 219, 255, 1)',
                

              }
            },
          },
          z: 3
        },
        // {
        //   // 最下面菱形
        //   data: dataList.map(item => item.value),
        //   type: 'pictorialBar',
        //   symbol: 'diamond',
        //   symbolSize: ['40', '30'],
        //   symbolPosition: 'start',
        //   symbolOffset: ['', '50%'],
        //   itemStyle: {
        //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //       { offset: 0, color: '#3C7AB9' },
        //       { offset: 0.5, color: '#3C7AB9' },
        //       { offset: 0.51, color: '#4DACFF' },
        //       { offset: 1, color: '#4DACFF' }
        //     ])
        //   },
        //   z: 1
        // },
        // {
        //   // 背景图数据图
        //   data: dataMaxList,
        //   type: 'bar',
        //   barWidth: 40,
        //   itemStyle: {
        //     color: "rgba(77, 172, 255, 0.2)"
        //   },
        //   z: 0,
        // },
        // {
        //   // 背景图最上面菱形
        //   data: dataMaxList,
        //   type: 'pictorialBar',
        //   symbol: 'diamond',
        //   symbolSize: ['40', '30'],
        //   symbolPosition: 'end',
        //   symbolOffset: ['', '-50%'],
        //   itemStyle: {
        //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        //       { offset: 0, color: 'rgba(77, 172, 255, 0.1)' },
        //       { offset: 1, color: 'rgba(77, 172, 255, 0.2)' }
        //     ])
        //   },
        //   z: 3
        // },
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
 
</body>

</html>